﻿@model CRM.Op.Models.ClueListViewModel
@{
    ViewBag.Title = "线索列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="content-header">
    <h1>
        线索管理
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li>
            <a href="#"><i class="fa fa-dashboard"></i>主页</a>
        </li>
        <li class="active">线索管理</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                    <form id="searchForm" class="form-inline">
                        <div class="form-group">
                            <label>车牌号</label>
                            <input type="text" class="form-control" style="width:200px;" maxlength="50" name="PlateNo" autocomplete="off" />
                        </div>
                        @if (ViewBag.RoleID == 1)
                        {
                            <div class="form-group">
                                <label>坐席</label>
                                <select class="form-control" id="UserID" name="UserID">
                                    <option value="-1">请选择坐席</option>
                                    @foreach (var item in Model.CompanyUsers)
                                    {
                                        <option value="@item.UserID">@item.UserName</option>
                                    }
                                </select>
                            </div>
                        }
                        <div class="form-group">
                            <label>品牌</label>
                            <input type="text" class="form-control" style="width:200px;" maxlength="50" name="Brand" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>车型</label>
                            <input type="text" class="form-control" style="width:200px;" maxlength="50" name="CModel" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>线索创建时间</label>
                            <input type="text" class="form-control" style="width:200px;" name="BCreateDate" id="BCreateDate" autocomplete="off" />
                            -
                            <input type="text" class="form-control" style="width:200px;" name="ECreateDate" id="ECreateDate" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-success" id="btnSearch">查找</button>
                        </div>
                    </form>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <div class="box-header">
                        <ul class="list-unstyled list-inline">
                            @if (ViewBag.RoleID == 1)
                            {
                                <li>
                                    <input type="button" class="btn btn-success " id="batchUser" value="批量分配坐席" />
                                </li>
                            }
                            <li>
                                <input type="button" class="btn btn-primary " id="batchMessage" value="批量发送短信" />
                            </li>
                        </ul>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table id="table"></table>
                    </div>
                </div>
                <!-- /.box -->
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-users" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">分配坐席</h4>
                </div>
                <div id="modal-body" class="modal-body">
                    <div class="form-group">
                        <label for="commentName">请选择坐席</label>
                        <select class="form-control" id="selUsers">
                            @foreach (var item in Model.CompanyUsers)
                            {
                                <option value="@item.UserID">@item.UserName</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveUserRela()" data-dismiss="modal">确定分配</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-editType" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">修改类别</h4>
                </div>
                <div id="modal-body" class="modal-body">
                    <div class="form-group">
                        <label for="commentName">请选择类别</label>
                        <select class="form-control" id="selClueType">
                            <option value="1">出险客户</option>
                            <option value="2">续保客户</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveClueType()" data-dismiss="modal">确定分配</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</section>
<style>
    .form-inline .form-group {
        margin-bottom: 5px;
        margin-left: 10px;
    }

</style>

@section scriptsBottom{
    <script type="text/javascript">
        var selClueId = 0,//单独分配的坐席ID
          assUrl = '@Url.Action("AssignUsers", "Clue")',
          brandListUrl = '@Url.Action("GetBrandList", "Public")',
          serialListUrl = '@Url.Action("GetSerialList", "Public")',
          uploadUrl = '@Url.Action("UploadExcel", "Clue")',
          clueListUrl = '@Url.Action("GetClueList", "Clue")',
          editTypeUrl = '@Url.Action("EditClueType","Clue")';

        $(document).ready(function () {
            $("#BCreateDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });
            $("#ECreateDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });

            $("#model_btn_yes").click(function () {
                updateVehiclStatus(2);
            });
            $("#model_btn_no").click(function () {
                updateVehiclStatus(3);
            });
            $("#btnSearch").on("click", function () {
                $('#table').bootstrapTable('refresh');
            });
            binds();
            init();
        });

        //弹窗修改线索类型
        function editType(clueId, type) {
            selClueId = clueId;
            $("#selClueType").val(type);
            $("#modal-editType").modal('show');
        }

        //保存线索类别
        function saveClueType() {
            var selType = $("#selClueType").val();
            var data = {
                "ClueID": selClueId,
                "ClueType": selType
            };
            BMCW.ajax({
                url: editTypeUrl,
                type: "POST",
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        if (status == 0) {
                            BMCW.alert("保存成功");
                        } else {
                            BMCW.alert("保存失败");
                        }
                        $('#table').bootstrapTable('refresh');
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }

        //线索来源切换
        function binds() {
            //批量分配点击
            $("#batchUser").on("click", function () {
                var chks = $('#table').bootstrapTable('getSelections');
                if (chks.length < 1) {
                    BMCW.alert("请选择待分配的线索");
                } else {
                    $("#modal-users").modal('show');
                }
            });
        }

        //分配坐席模态框展示
        function user(clueid) {
            selClueId = clueid;
            $("#modal-users").modal('show');
        }

        //分配坐席保存
        function saveUserRela() {
            var userId = $("#selUsers").val();
            if (!userId || userId < 0) {
                BMCW.alert("请选择坐席");
                return;
            }
            var cluelist = [];
            if (selClueId > 0) {
                cluelist.push(selClueId);

            } else {
                var chks = $('#table').bootstrapTable('getSelections');
                for (var i = 0; i < chks.length; i++) {
                    cluelist.push(chks[i].ClueID);
                }
            }
            selClueId = 0;
            var data = {
                "UserID": userId,
                "ClueIDs": cluelist
            };
            BMCW.ajax({
                url: assUrl,
                type: "POST",
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        if (status == 0) {
                            BMCW.alert("分配成功");
                        } else {
                            BMCW.alert("分配失败");
                        }
                        $('#table').bootstrapTable('refresh');
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }

        //初始化
        function init() {
            $('#table').bootstrapTable({
                pagination: true,
                sortable: false,
                method: 'post',
                sidePagination: "server",
                queryParamsType: null,
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50],
                minimumCountColumns: 2,
                url: clueListUrl,
                queryParams: function (params) {
                    var query = {
                        PageSize: params.pageSize,
                        PageIndex: params.pageNumber
                    };
                    //return query;
                    var fdata = $("#searchForm").serializeJson();
                    return $.extend(query, fdata);

                },
                columns: [{
                    checkbox: true,
                    formatter: function (value, row, index) {
                        if (row.UploadStatus == 1) {
                            return {
                                disabled: false
                            }
                        } else {
                            return {
                                disabled: true
                            }
                        }
                    }
                },
               {
                   width:20,
                   field: 'ClueID',
                   title: 'ID'
               }, {
                   width: 60,
                   field: 'UserName',
                   title: '客户名称'
               }, {
                   width: 80,
                   field: 'PlateNo',
                   title: '车牌号'
               }, {
                   width: 100,
                   field: 'Brand',
                   title: '品牌'
               }, {
                   width: 100,
                   field: 'Model',
                   title: '车型'
               }, {
                    width: 60,
                    field: 'SeatName',
                    title: '分配坐席'
               }, {
                   width: 60,
                    field: 'UploadStatusName',
                    title: '状态'
               },  {
                   width: 100,
                   field: 'CreatedDate',
                   title: '线索创建时间'
               }, {
                    width: 60,
                    field: 'ClueTypeName',
                    title: '线索类型'
                },  {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var fmt = '';
                        if (row.UploadStatus == 1)
                        {
                            fmt += ' <button type="button" class="btn btn-info btn-xs" onclick="user(' + row.ClueID + ')">分配坐席</button>';
                            fmt += ' <button type="button" class="btn btn-success btn-xs" onclick="callNum(' + row.ClueID + ',' + row.CompanyID + ',' + row.UserID + ')">呼叫</button>';
                        }
                        if (row.IsMessage < 1) {
                            fmt += ' <button type="button" class="btn btn-success btn-xs" onclick="messageNum(' + row.ClueID + ',' + row.CompanyID + ')">发送短信</button>';
                        }
                        fmt += ' <button type="button" class="btn btn-success btn-xs" onclick="callInfo(' + row.ClueID + ')">通话明细</button>';
                        return fmt;
                    }
                }]
            });
        }

        function callNum(cid,ccid,uid) {
            layer.open({
                type: 2,
                title: '外呼中',
                shadeClose: false,
                shade: 0.3,
                area: ['720px', '130px'],
                content: '@Url.Action("MakeCall", "Clue")' + '?subId=0&clueId=' + cid + '&companyId=' + ccid + '&userId=' + uid //iframe的url
            });
            return false;
        }

        function messageNum(cid, ccid) {
            BMCW.ajax({
                url: '@Url.Action("SendMessage", "Clue")',
                type: "POST",
                data: {
                    ClueID: cid,
                    CompanyID: ccid
                },
                success: function (rt) {
                    BMCW.alert(rt.message);
                }
            });
        }

        function batchMessage() {
            var chks = $('#table').bootstrapTable('getSelections');
            if (chks.length < 1) {
                BMCW.alert("请选择发送短信的线索");
            } else {
                BMCW.ajax({
                    url: '@Url.Action("SendMessages", "Clue")',
                    type: "POST",
                    data: {
                        ClueIDs: chks,
                        CompanyID: @Model.Auth.CompanyID
                    },
                    success: function (rt) {
                        BMCW.alert(rt.message);
                    }
                });
            }
        }


        function callInfo(cid) {
            layer.open({
                type: 2,
                title: '外呼明细',
                shadeClose: true,
                shade: 0.3,
                area: ['800px', '500px'],
                content: '@Url.Action("GetCallInfo", "Clue")' + '?clueId=' + cid //iframe的url
            });
        }
    </script>
}
